<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="searchKeyword"
        placeholder="请输入关键词"
        style="width: 200px"
        class="filter-item"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleSearch"
      >
        搜索
      </el-button>
    </div>

    <el-table
      v-loading="loading"
      :data="dataList"
      border
      style="width: 100%"
    >
      <el-table-column
        type="index"
        label="序号"
        width="80"
        align="center"
        :index="getIndex"
      />


$--LISTCOLUMN--$
     
      <el-table-column
        label="操作"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="currentPage"
      :limit.sync="pageSize"
      @pagination="getDataList"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { listObjs, deleteObj } from '@/api/$TABLENAME$'
import Pagination from '@/components/Pagination'

export default {
  name: '$TABLENAME$List',
  components: { Pagination },
  data() {
    return {
      dataList: [],
      total: 0,
      loading: false,
      currentPage: 1,
      pageSize: 10,
      searchKeyword: ''
    }
  },
  created() {
    this.getDataList()
  },
  activated() {
    console.log('page  activated')
    this.getDataList()
  },
  methods: {
    getDataList() {
      this.loading = true
      const params = {
        page: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.searchKeyword
      }
      listObjs(params).then(response => {
        if (response.code === 20000) {
          this.dataList = response.data.items || []
          this.total = response.data.total || 0
        } else {
          this.$message.warning(response.message || '获取数据异常')
        }
        this.loading = false
      })
    },

    handleSearch() {
      this.currentPage = 1
      this.getDataList()
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.getDataList()
    },

    handleCurrentChange(val) {
      this.currentPage = val
      this.getDataList()
    },

    handleEdit(row) {
      this.$router.push(`/$TABLENAME$/edit/${row.$primary$}`)
    },

    handleDelete(row) {
      this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        deleteObj(row.$primary$).then(res => {
          if (res.code === 20000) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 重新加载列表数据
            this.getDataList()
          } else {
            this.$message.error(res.message || '删除失败')
          }
        }).catch(error => {
          console.error('删除失败:', error)
          this.$message.error('删除失败，请重试')
        }).finally(() => {
          this.loading = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    getIndex(index) {
      return (this.currentPage - 1) * this.pageSize + index + 1
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-container {
  padding-bottom: 10px;
}

.filter-item {
  margin-right: 10px;
}




</style>
